<template>
    <div class="gonggao">
        <table>
            <h3>公告通知</h3>
            <tr class="yetRead">
                <td>
                    <div class="boxRead">
                        <p :style="tableData.length==0?noZero:''">未读通知：
                            <span style="color:red ; font-weight: bold ; font-size: 19px;">{{tableData.length}}</span>条，请及时查看！！！</p>
                        <p :style="tableData.length==0?'':noZero">没有未读通知，祝你生活愉快^-^</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <el-table
                        :data="tableData"
                        max-height="220"
                    >
                        <el-table-column
                            fixed
                            prop="date"
                            label="日期"
                            width="200"
                        >
                        </el-table-column>
                        <el-table-column
                            prop="notice"
                            label="通知"
                        >
                        </el-table-column>
                        <el-table-column
                            fixed="right"
                            label="操作"
                            width="180"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    @click="deleteRow(scope.$index,scope.row,tableData)"
                                    type="text"
                                    size="small"
                                >
                                    标为已读
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </td>
            </tr>
            <tr>
                <td>
                    <el-table
                        :data="NoRead.filter(data => !search || data.notice.toLowerCase().includes(search.toLowerCase()))"
                        style="margin-top: 10px;"
                        max-height="210"
                    >
                        <el-table-column
                            fixed
                            label="Date"
                            prop="date"
                            width="200"
                        >
                        </el-table-column>
                        <el-table-column
                            label="Notices"
                            prop="notice"
                        >
                        </el-table-column>
                        <el-table-column align="right">
                            <template
                                slot="header"
                                slot-scope="scope"
                            >
                                <el-input
                                    v-model="search"
                                    size="mini"
                                    placeholder="输入关键字搜索"
                                />
                            </template>
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    @click="handleEdit(scope.$index, scope.row,NoRead)"
                                >标为未读</el-button>
                                    <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row,NoRead)"
                                    >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
  methods: {
    deleteRow(index, row) {
      this.NoRead.unshift(row);
      this.tableData.splice(index, 1);
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.NoRead.splice(index, 1);
      this.tableData.unshift(row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.NoRead.splice(index, 1);
    }
  },
  data() {
    return {
      tableData: [
        {
          date: "2020-06-01",
          notice: "通知1"
        },
        {
          date: "2020-06-08",
          notice: "通知2"
        },
        {
          date: "2020-06-12",
          notice: "通知3"
        },
        {
          date: "2020-06-25",
          notice: "通知4"
        },
        {
          date: "2020-06-30",
          notice: "通知5"
        },
        {
          date: "2020-07-04",
          notice: "通知6"
        }
      ],
      NoRead: [
        {
          date: "2020-06-03",
          notice: "通知1-1"
        },
        {
          date: "2020-06-04",
          notice: "通知1-2"
        },
        {
          date: "2020-06-09",
          notice: "通知2-1"
        },
        {
          date: "2020-06-10",
          notice: "通知2-2"
        },
        {
          date: "2020-06-13",
          notice: "通知3-1"
        },
        {
          date: "2020-06-14",
          notice: "通知3-2"
        }
      ],
      search: "",
      noZero: {
        display: "none"
      }
    };
  }
};
</script>

<style scoped>
.gonggao h3 {
  margin: 10px 0 5px -58px;
  text-align: left;
  font-size: 30px;
}
.gonggao table {
  margin: 0 auto;
  width: 1000px;
}
.gonggao .yetRead {
  background: white;
}
.gonggao .yetRead .boxRead {
  margin: 10px 0 10px 10px;
  text-align: left;
  font-size: 17px;
}
</style>